Ext.define('Qms.view.reception.ReceptionViewport', {
    extend: 'Ext.panel.Panel',
    //height: '100%',
    //width: '100%',
    layout: {
        type: 'border'
    },

    initComponent: function() {
        var me = this;
        var tokenInfo = Ext.create('Qms.view.token.TokenInfo',{
                            url: 'reception/createToken',
                            id: 'tokenInfo'
                        })
        var tokenGrid = Ext.create('Qms.view.token.TokenDetailsGrid',{
        });
        tokenGrid.setMyBindingForm(tokenInfo);
        
        var destination = Ext.create("Qms.view.destination.DestinationViewport",{
            title: 'Destination Screen'
            //height: me.getViewportHeight()/1.2
        });
        
        me.items = [
            {
                xtype: 'panel',
                autoHeight: true,
                layout: {
                    align: 'stretch',
                    type: 'vbox'
                },
                //title: 'Token Information',
                region: 'center',
                items: [
                    {
                        xtype: 'tabpanel',
                        activeTab: 0,
                        flex: 1,
                        items: [
                            {
                                xtype: 'panel',
                                title: 'Token List',
                                items: [
                                        tokenGrid
                                ]
                            },
                            destination
                        ]
                    }
                ]
            },
            {
                xtype: 'panel',
                width: 150,
                title: 'Options Console',
                region: 'east',
                split: true,
                hidden: true
            },
            {
                xtype: 'panel',
                width: 350,
                collapsible: true,
                title: 'Token Information',
                titleCollapse: true,
                region: 'west',
                split: true,
                items: [
                        tokenInfo
                ]
            },
            {
                xtype: 'panel',
                height: 90,
                title: 'Status Panel',
                region: 'south',
                split: true,
                collapsible: true,
                titleCollapse: true
            }
        ];
        me.callParent(arguments);
    }
});